<!--
 * @Description: 我的tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 16:42:03
-->
<template>
  <div class="user">
    <div class="header">
      <div class="photo">
         <van-uploader 
          multiple 
          :max-count="1" 
          result-type="file"
          :after-read="afterRead" >
            <!-- 默认头像 -->
           <img :src="info.user_face" alt="" v-if="info.user_face"/>
           <img src="../../assets/1.jpg" alt="" v-else/>
         </van-uploader>
      </div>
      <div class="name">{{info.name}}</div>
    </div>
    <van-cell title="所有订单" is-link to="/manager/order" />
    <div class="btn" @click="logoutHandler"> 退出 </div>
    <div class="btn" @click="logoutHandler"> 切换账号 </div>
  </div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import { Toast } from 'vant';
import axios from 'axios'
import {patch} from '../../http/axios'
export default {
  methods:{
    ...mapActions('user',['logout','getInfo']),
    logoutHandler(){
      this.logout();
    },
    // 上传图片
    afterRead(file){
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      let params = new FormData();
      params.append("file", file.file);
      axios.post(url, params, {
        headers: { "Content-Type": "multipart/form-data" }
      })
      .then(response => {
        // 更新用户头像
        file.status = "success";
        // 新头像地址
        let user_face = 'http://121.199.29.84:8888/group1/'+response.data.data.id;
        let params = {
          id:this.info.id+"",
          user_face
        }
        let url = "/user/updateUserFace"
        patch(url,params).then(resp => {
          Toast.success(resp.message)
          // 刷新用户信息 - 状态机
          this.getInfo();
        })
      })
      .catch(error => {
        file.status = "failed";
        file.message = "上传失败";
        Toast("图片上传失败:" + error + " 请返回重新上传");
      });
    }
  },
  computed:{
    ...mapState("user",["info"])
  }
}
</script>

<style scoped>
.header {
  padding-top: 46px;
  text-align: center;
  background: #1659a0;
  margin-bottom: 2em;
}

.header .photo {
  margin: 0 auto;
  width: 10em;
  height: 10em;
  border-radius: 5px;
  box-sizing: border-box;
  border:1px solid #1659a0;
  overflow:hidden;
  padding: 1em;
}
.header .name {
  line-height: 3em;
  font-size: 16px;
  color: #ffffff;

}
.header .photo img {
 width: 100%;
}

.btn {
  width: 90%;
  margin: 1em auto;
  line-height: 3em;
  text-align: center;
  border: 1px solid #ededed;
  border-radius: 1.5em;
}

</style>